import { serlist } from '../../../api/index'
import React,{useEffect}from 'react'
import {useDispatch,useSelector} from "react-redux"
import {useNavigate} from "react-router-dom"
import Mainright from "../../../components/Mainright"
type Props = {}

const Index = (props: Props) => {
  const dispatch=useDispatch()
  const navigate=useNavigate()
  useEffect(() => {
    getser()
}, [])
const getser = () => {
    serlist().then((res: any) => {
        dispatch({
            type:"SER_LIST",
            payload:res.data.data
        })
    })
}
  const list=useSelector((state:any)=>state.reducer.serlist)
  console.log(list);
  
  return (
    <div className='archivesbox'>
      <div className="archivesleft">
        <div className="archivestop">
        <p className='plum'>Archives</p>
        <p className='num'>Total <span className='numm'>{list.length}</span>  Count</p> 
        </div>
        <div className="archivescont">
          <h3 style={{fontSize:'20px',marginLeft:'20px'}}>2022</h3>
          <ul>
            {
              list&&list.map((item:any,index:number)=>{
                return <li key={index} onClick={()=>navigate("/home/Details/"+item.id, { state: item })}><span>12-10</span>{item.title}</li>
              })
            }
          </ul>
        </div>
      </div>
      <div className="archivesright">
        <div className="archivesrighttop">
          <Mainright></Mainright>
        </div>
        
      </div>
    </div>
  )
}

export default Index

function dispatch(arg0: { type: string; payload: any }) {
  throw new Error('Function not implemented.')
}
